<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table'

import { markRaw, onMounted, ref } from 'vue'

import { Page, useVbenModal } from '@vben/common-ui'

import { Button, Input, message, Space } from 'ant-design-vue'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { colorgetDel, getColorSeriesList } from '#/api/colorSeries'
import TwoFields from '#/views/backend/modules/two-fields.vue'

import popupForm from './popupForm.vue'

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}

const formOptions: any = {
  collapsed: true,
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: true,
  wrapperClass: 'grid-cols-5',
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'name',
      label: '名称',
      operator: 'LIKE',
    },
    {
      component: markRaw(TwoFields),
      fieldName: 'level',
      disabledOnChangeListener: false,
      label: '层级',
      operator: 'RANGE',
      valueToString: true,
      componentProps: {
        allowClear: true,
        placeholder: '范围筛选',
      },
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'color_system',
      label: '色系',
      operator: 'LIKE',
    },

    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: [
          {
            label: '启用',
            value: 0,
          },
          {
            label: '禁用',
            value: 1,
          },
        ],
        showSearch: true,
      },
      label: '状态',
      fieldName: 'status',
      operator: 'false',
    },
  ],
  // 是否可展开
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
}
const gridOptions: VxeTableGridOptions = {
  treeConfig: {
    parentField: 'parent_id',
    rowField: 'id',
    expandAll: true,
  },
  checkboxConfig: {
    highlight: true,
  },
  cellConfig: {},
  height: 'auto',
  columns: [
    {
      type: 'checkbox', // 多选列（自带全选框）
      width: 80,
      align: 'center', // 居中
      fixed: 'left', // 固定在最左侧
      title: '', // 表头文字
    },
    {
      field: 'name',
      title: '名称',
      treeNode: true,
    },
    {
      field: 'level',
      title: '层级',
    },
    {
      field: 'color_system',
      title: '色系',
    },
    {
      field: 'warm_color',
      title: '色感',
    },
    {
      field: 'uneven_color',
      title: '深浅色',
    },
    {
      title: '状态',
      field: 'status',

      cellRender: {
        name: 'CellTag',
        options: [
          {
            color: 'success',
            label: '启用',
            value: 1,
          },
          { color: 'error', label: '禁用', value: 0 },
        ],
      },
    },

    {
      field: 'action',
      title: '操作',
      fixed: 'right',
      width: 160,
      slots: { default: 'action' },
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const search = await gridApi.formApi.getFiltersValues()
        const res = await getColorSeriesList({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
          search,
        })

        return { items: res.list, total: res.total }
      },
    },
    sort: true,
  },

  id: 'colorSeries',
  customConfig: {
    storage: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
})

function modelClose() {
  gridApi.reload()
}

const [formModal, formModalApi] = useVbenModal({
  connectedComponent: popupForm,
})
// 编辑
function openEdit(res: any, but: any) {
  formModalApi.setData({ rowData: res.id, view: but }).open()
}

function openEdits() {
  const selectedRecords = gridApi.grid.getCheckboxRecords()
  if (selectedRecords.length === 0) {
    message.error('请选择数据')
    return
  }
  const data = selectedRecords.map((record: any) => record.id)
  formModalApi.setData({ rowData: data, view: 'edit' }).open()
}

onMounted(() => {})
const isexpand = ref(true)
function expand() {
  isexpand.value = true
  gridApi.grid?.setAllTreeExpand(true)
}
function fold() {
  isexpand.value = false
  gridApi.grid?.setAllTreeExpand(false)
}

function handels() {
  const selectedRecords = gridApi.grid.getCheckboxRecords()
  if (selectedRecords.length === 0) {
    message.error('请选择数据')
    return
  }
  const ids = selectedRecords.map((record: any) => record.id)
  colorgetDel({ ids }).then((res: any) => {
    if(res.data.code === 1) {
      message.success(res.data.msg)
      gridApi.reload()
    }else {
      message.error(res.data.msg)
    }
  })
}

function handel(id:any) {
  const ids = [id]
  colorgetDel({ ids }).then((res: any) => {
    if(res.data.code === 1) {
      message.success(res.data.msg)
      gridApi.reload()
    }else {
      message.error(res.data.msg)
    }
  })
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-actions>
        <div>
          <Space>
            <Button type="primary" @click="openEdit('', 'add')">新建</Button>
            <Button type="primary" @click="openEdits">编辑</Button>
            <Button type="primary" @click="handels()" danger>删除</Button>
            <Button type="primary" @click="expand" v-if="!isexpand">展开所有</Button>
            <Button type="primary" danger @click="fold" v-else>折叠所有</Button>
          </Space>
        </div>
      </template>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="通过ID模糊搜索" style="width: 200px; margin-right: 8px" @change="doSearch" />
      </template>
      <template #action="{ row }">
        <Space>
          <Button type="primary" size="small" @click="openEdit(row, 'edit')"> 编辑 </Button>
          <Button type="primary" size="small" danger @click="handel(row.id)"> 删除 </Button>
        </Space>
      </template>
    </Grid>
    <formModal @refresh="modelClose()" />
  </Page>
</template>
<style lang="scss" scoped>
.my-green-btn.ant-btn-primary {
  background-color: #67c23a;
  border-color: #67c23a;
}

.my-yello-btn.ant-btn-primary {
  background-color: #e6a23c;
  border-color: #e6a23c;
}
</style>
